<template>
  <div class="index">
    <head-text titleText="信息管理"></head-text>
    <div class="list-content">
      <el-tabs v-model="activeName" type="card">
        <!-- <el-tab-pane label="商家名称配置" name="first">
          <el-form
            :model="merchantForm"
            status-icon
            ref="merchantForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="商家名称">
              <el-input
                v-model="merchantForm.merchant"
                style="width:200px;"
                class="ml-10"
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini">提交</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane> -->
        <el-tab-pane label="商品购买限制" name="first">
          <div class="text-setting">
            <div class="mb-10">
              <el-button @click="addPay" plain type="success" size="mini"
                >添加购买限制</el-button
              >
            </div>
            <div class="table-title">
              <span></span>
              <h5>购买限制列表</h5>
            </div>
            <el-table
              :data="tableDataPay"
              style="width: 100%"
              border
              size="mini"
              v-if="hackResetPay"
            >
              <el-table-column type="index" width="50" align="center">
              </el-table-column>
              <el-table-column prop="activityNames" label="活动" align="center">
              </el-table-column>
              <el-table-column
                prop="bookingAdvance"
                label="下单时间限制"
                align="center"
              >
                <template slot-scope="scope">
                  活动前 {{ scope.row.bookingAdvance }} 小时不可下单
                </template>
              </el-table-column>
              <el-table-column
                prop="cancelAdvance"
                label="取消订单限制"
                align="center"
              >
                <template slot-scope="scope">
                  活动前 {{ scope.row.cancelAdvance }} 小时不可取消订单
                </template>
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                align="center"
              >
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    style="margin: 5px"
                    plain
                    size="mini"
                    @click="editPay(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    type="danger"
                    style="margin: 5px"
                    plain
                    size="mini"
                    @click="delPay(scope.row.id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <page
              :nowPage="nowPagePay"
              :total="totalPay"
              :limit="limitPay"
              @pageChange="onPageChangePay"
              @sizeChange="onSizeChangePay"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="商家图片配置" name="second">
          <div class="text-setting">
            <div class="mb-10">
              <el-button @click="addPic" plain type="success" size="mini"
                >添加图片</el-button
              >
            </div>
            <div class="table-title">
              <span></span>
              <h5>图片列表</h5>
            </div>
            <el-table
              :data="tableDataBanner"
              style="width: 100%"
              border
              size="mini"
              v-if="hackResetPic"
            >
              <el-table-column type="index" width="50" align="center">
              </el-table-column>
              <el-table-column prop="activityNames" label="活动" align="center">
              </el-table-column>
              <el-table-column label="图片" align="center" width="200">
                <template slot-scope="scope">
                  <img
                    :src="scope.row.bannerUrl"
                    class="img-size"
                    alt=""
                    v-image-preview
                  />
                </template>
              </el-table-column>
              <el-table-column prop="bannerUrl" label="图片地址" align="center">
              </el-table-column>
              <el-table-column prop="linkName" label="链接商品" align="center">
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                align="center"
              >
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    style="margin: 5px"
                    plain
                    size="mini"
                    @click="editPicture(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    type="danger"
                    style="margin: 5px"
                    plain
                    size="mini"
                    @click="delPicture(scope.row.id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <page
              :nowPage="nowPagePic"
              :total="totalPic"
              :limit="limitPic"
              @pageChange="onPageChangePic"
              @sizeChange="onSizeChangePic"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="商家公告配置" name="third">
          <div class="text-setting">
            <div class="mb-10">
              <el-button @click="addAd" plain type="success" size="mini"
                >添加公告</el-button
              >
            </div>
            <div class="table-title">
              <span></span>
              <h5>公告列表</h5>
            </div>
            <el-table
              :data="tableDataAnnounce"
              style="width: 100%"
              border
              size="mini"
              v-if="hackResetAd"
            >
              <el-table-column type="index" width="50" align="center">
              </el-table-column>
              <el-table-column prop="activityNames" label="活动" align="center">
              </el-table-column>
              <el-table-column
                prop="announcement"
                label="公告"
                align="center"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                align="center"
              >
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    style="margin: 5px"
                    plain
                    size="mini"
                    @click="editAd(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    type="danger"
                    style="margin: 5px"
                    plain
                    size="mini"
                    @click="delAd(scope.row.id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <page
              :nowPage="nowPageAd"
              :total="totalAd"
              :limit="limitAd"
              @pageChange="onPageChangeAd"
              @sizeChange="onSizeChangeAd"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <dialog-ad :dialogObj="dialogAd" @reflash="getadList"></dialog-ad>
    <dialog-pic :dialogObj="dialogPic" @reflash="getPicList"></dialog-pic>
    <dialog-pay :dialogObj="dialogPay" @reflash="getList"></dialog-pay>
  </div>
</template>

<script>
import { placeholderTips, validateNum } from "@u/validate";
import headText from "@c/headText";
import dialogPic from "./dialogPic";
import dialogAd from "./dialogAd";
import dialogPay from "./dialogPay";
import page from "@c/page";
import {
  getOrderConfigApi,
  delOrderConfigApi,
  getMerchantBannerListApi,
  getAnnouncementListApi,
  deleteMerchantBannerApi,
  deleteAnnouncementApi
} from "@s/api";
export default {
  name: "index",
  data() {
    return {
      activeName: "first",
      nowPageAd: 1,
      totalAd: 0,
      limitAd: 10,
      nowPagePic: 1,
      totalPic: 0,
      limitPic: 10,
      nowPagePay: 1,
      totalPay: 0,
      limitPay: 10,
      placeholderTips: placeholderTips,
      // activeName: "second",
      dialogPay: {
        id: "",
        title: "",
        show: false,
        form: {}
      },
      hideUpload: false,
      hackResetAd: true,
      hackResetPic: true,
      hackResetPay: true,
      dialogAd: {
        id: "",
        title: "",
        show: false,
        form: {}
      },
      dialogPic: {
        id: "",
        title: "",
        show: false,
        form: {}
      },
      rules: {
        bookingAdvance: [
          {
            required: true,
            validator: validateNum,
            trigger: "blur"
          }
        ],
        cancelAdvance: [
          {
            required: true,
            validator: validateNum,
            trigger: "blur"
          }
        ]
      },
      tableDataBanner: [],
      tableDataAnnounce: [],
      tableDataPay: []
    };
  },
  components: {
    headText,
    dialogPic,
    dialogAd,
    dialogPay,
    page
  },
  mounted() {
    this.getadList();
    this.getPicList();
    this.getList();
  },
  methods: {
    onPageChangePay(val) {
      this.nowPagePay = val;
      this.getList();
    },
    onSizeChangePay(val) {
      this.nowPagePay = 1;
      this.limitPay = val;
      this.getList();
    },
    onPageChangePic(val) {
      this.nowPagePic = val;
      this.getPicList();
    },
    onSizeChangePic(val) {
      this.nowPagePic = 1;
      this.limitPic = val;
      this.getPicList();
    },
    onPageChangeAd(val) {
      this.nowPageAd = val;
      this.getadList();
    },
    onSizeChangeAd(val) {
      this.nowPageAd = 1;
      this.limitAd = val;
      this.getadList();
    },
    getList() {
      let json = {
        limit: this.limitPay,
        page: this.nowPagePay,
        orderType: 2 // 特许
      };
      getOrderConfigApi(json).then(res => {
        this.hackResetPay = false;
        this.$nextTick(() => {
          this.totalPay = res.total;
          this.tableDataPay = res.list;
          this.hackResetPay = true;
        });
      });
    },
    getadList() {
      let json = {
        limit: this.limitAd,
        page: this.nowPageAd,
        merchantType: 2 // 2 特许
      };
      getAnnouncementListApi(json).then(res => {
        this.hackResetAd = false;
        this.$nextTick(() => {
          this.tableDataAnnounce = res.list;
          this.totalAd = res.total;
          this.hackResetAd = true;
        });
      });
    },
    getPicList() {
      let json = {
        limit: this.limitPic,
        page: this.nowPagePic,
        merchantType: 2 // 2 特许
      };
      getMerchantBannerListApi(json).then(res => {
        this.hackResetPic = false;
        this.$nextTick(() => {
          this.totalPic = res.total;
          this.tableDataBanner = res.list;
          this.hackResetPic = true;
        });
      });
    },
    editPicture(val) {
      this.dialogPic.id = val.id;
      this.dialogPic.show = true;
      this.dialogPic.form = val;
      this.dialogPic.title = "编辑图片";
    },
    delPicture(id) {
      this.$confirm("此操作将删除该图片?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let json = [id];
        deleteMerchantBannerApi(json).then(() => {
          this.getPicList();
          this.$message({
            type: "success",
            message: "删除成功！"
          });
        });
      });
    },
    delPay(id) {
      this.$confirm("此操作将删除该限制?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let json = [id];
        delOrderConfigApi(json).then(() => {
          this.getList();
          this.$message({
            type: "success",
            message: "删除成功！"
          });
        });
      });
    },
    editAd(val) {
      this.dialogAd.id = val.id;
      this.dialogAd.show = true;
      this.dialogAd.form = val;
      this.dialogAd.title = "编辑公告";
    },
    editPay(val) {
      this.dialogPay.id = val.id;
      this.dialogPay.show = true;
      this.dialogPay.form = val;
      this.dialogPay.title = "编辑购买限制";
    },
    delAd(id) {
      this.$confirm("此操作将删除该公告?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let json = [id];
        deleteAnnouncementApi(json).then(() => {
          this.getadList();
          this.$message({
            type: "success",
            message: "删除成功！"
          });
        });
      });
    },
    addPic() {
      this.dialogPic.id = "";
      this.dialogPic.show = true;
      this.dialogPic.title = "添加图片";
    },
    addPay() {
      this.dialogPay.id = "";
      this.dialogPay.show = true;
      this.dialogPay.title = "添加购买限制";
    },
    addAd() {
      this.dialogAd.id = "";
      this.dialogAd.show = true;
      this.dialogAd.title = "添加公告";
    }
  }
};
</script>
<style scoped lang="scss">
.img-size {
  width: 100px;
}
</style>
